<script setup lang="ts">

import { onMounted } from "vue";
import { init_cesium } from '../scripts/cesium_set';   // 引入cesium webgis 3d 

import  { EleUISet } from '../scripts/element-plusUI_set';   // 引入element-plusUI_set 


onMounted(() => {
  console.log("111")
  init_cesium() // 引入cesium webgis 3d :初始化
  
})


</script>

<template>
  <!-- // 引入cesium webgis 3d  -->
  <div id="cesiumContainer">
  </div>

  <!-- // 引入Element Plus -->
  <div class="vue-div">
    <el-button>点击我</el-button>
    <h3>0 按钮</h3>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
    
    <h3>1 图标</h3>
        <el-icon><Plus /></el-icon>
        <el-icon><Edit /></el-icon>
        <el-icon><Delete /></el-icon>
        <el-icon class="is-loading"><Loading /></el-icon>
        <hr>
    <h3>图标属性</h3>
        <el-icon size="30" color="red"><Search /></el-icon>
        <hr>
    <h3>按钮中包含：组合 图标 与文字</h3>
        <el-button type="primary">                
            <el-icon><Search /></el-icon> <!-- 图标 -->
            <span> 搜索 </span> <!-- 文字 -->
        </el-button>
        <el-button type="primary">                
            <el-icon><Search /></el-icon> <!-- 图标 -->
            <span> 搜索 </span> <!-- 文字 -->
        </el-button>

        <el-button type="primary">
            <el-icon><Search /></el-icon>
        </el-button>

        <el-button type="primary" circle> <!-- 圆形按钮 -->
            <el-icon><Search /></el-icon>
        </el-button>
        <hr>
    <h3>1.1 按钮组</h3>
        <el-button-group> <!-- 按钮组 -->
            <el-button type="primary">
                <el-icon><Plus /></el-icon>
            </el-button>

            <el-button type="primary">
                <el-icon><Edit /></el-icon>
            </el-button>

            <el-button type="primary">
                <el-icon><Delete /></el-icon>
            </el-button>
        </el-button-group>
        <hr>
    <h3>2  提示框：消息 ， 确认框，通知，通知2</h3>
        <el-button @click="EleUISet.openMsg">消息</el-button>
        <el-button @click="EleUISet.openConfirm">确认框</el-button>
        <el-button @click="EleUISet.openNotifiy">通知</el-button>
        <el-button @click="EleUISet.openNotifiy2">通知2</el-button>
    <h3>3 水平导航 el-menu mode="horizontal"</h3>
        <el-menu mode="horizontal" :default-active="EleUISet.selectedIndex" @select="EleUISet.selected">
            <el-menu-item index="1">邓瑞编程</el-menu-item>
            <el-sub-menu index="2">
                <template #title>我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="3">消息中心</el-menu-item>
            <el-menu-item index="4">订单管理</el-menu-item>
        </el-menu>

    <h3>3 水平导航 mode="horizontal"-自定义样式</h3>
        <el-menu mode="horizontal" :default-active="EleUISet.selectedIndex" @select="EleUISet.selected" background-color="#545c64"
            text-color="#fff" active-text-color="#ffd04b" style="height: 40px; width: 600px;">
            <el-menu-item index="1">邓瑞编程</el-menu-item>
            <el-sub-menu index="2">
                <template #title>我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="3">消息中心</el-menu-item>
            <el-menu-item index="4">订单管理</el-menu-item>
        </el-menu>

    <h3>3 垂直导航 mode="horizontal" 不设置就是垂直导航</h3><br>
        <el-menu :default-active="EleUISet.selectedIndex" @select="EleUISet.selected" style="width: 200px;">
            <el-sub-menu index="1">
                <template #title>
                    <el-icon><Search /></el-icon>
                    <span>导航一</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="1-1">选项1</el-menu-item>
                    <el-menu-item index="1-2">选项2</el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item index="2">
                <el-icon><Edit /></el-icon>
                <template #title>导航二</template>
            </el-menu-item>
            <el-menu-item index="3">
                <el-icon><Delete /></el-icon>
                <template #title>导航三</template>
            </el-menu-item>
            <el-menu-item index="4">
                <el-icon><Setting /></el-icon>
                <template #title>导航四</template>
            </el-menu-item>
        </el-menu>


        <h3>3 垂直导航-默认展开和自定义样式</h3>
        <el-menu :default-active="EleUISet.selectedIndex" @select="EleUISet.selected" :default-openeds="EleUISet.defaultOpeneds.value"
            background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="width: 200px;">
            <el-sub-menu index="1">
                <template #title>
                    <el-icon><Search /></el-icon>
                    <span>导航一</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="1-1">选项1</el-menu-item>
                    <el-menu-item index="1-2">选项2</el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item index="2">
                <el-icon><Edit /></el-icon>
                <template #title>导航二</template>
            </el-menu-item>
            <el-sub-menu index="3">
                <template #title>
                    <el-icon><Search /></el-icon>
                    <span>导航三</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="3-1">选项1</el-menu-item>
                    <el-menu-item index="3-2">选项2</el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item index="4">
                <el-icon><Setting /></el-icon>
                <template #title>导航四</template>
            </el-menu-item>
        </el-menu>

        <h3>4 面包屑</h3>
        
        <el-breadcrumb separator="/"> <!-- separator="/" -为分隔符 -->
            <el-breadcrumb-item><a href="#">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>邓瑞编程</el-breadcrumb-item>
            <el-breadcrumb-item>dengruicode.com</el-breadcrumb-item>
        </el-breadcrumb>
        
        <h3>5 下拉菜单</h3><br>
       
        <el-dropdown @command="EleUISet.userCommand"> <!-- @command="userCommand" --绑定的 事件userCommand -->
            <span>
                <el-icon><User /></el-icon> 个人中心
            </span>
            <template #dropdown>               
                <el-dropdown-menu>  <!-- el-dropdown-menu 菜单 列表  -->        
                    <el-dropdown-item command="order">订单</el-dropdown-item> 
                    <!-- 上面的command 绑定的事件：进行回调处理 -->
                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>

        <h3>6 tab标签页</h3>
        <el-tabs v-model="EleUISet.selectedName" @tab-click="EleUISet.tabClick" >
            <el-tab-pane label="邓瑞" name="1">内容1</el-tab-pane>
            <el-tab-pane label="邓瑞编程" name="2">内容2</el-tab-pane>
            <el-tab-pane label="dengruicode.com" name="3">内容3</el-tab-pane>
        </el-tabs>
        <h3>卡片风格</h3>
        <el-tabs v-model="EleUISet.selectedName" @tab-click="EleUISet.tabClick" type="card">
            <el-tab-pane label="邓瑞" name="a">内容1</el-tab-pane>
            <el-tab-pane label="邓瑞编程" name="b">内容2</el-tab-pane>
            <el-tab-pane label="dengruicode.com" name="b">内容3</el-tab-pane>
        </el-tabs>

        <h3>带有边框的卡片风格</h3>
        <el-tabs v-model="EleUISet.selectedName" @tab-click="EleUISet.tabClick" type="border-card">
            <el-tab-pane label="邓瑞" name="A">内容1</el-tab-pane>
            <el-tab-pane label="邓瑞编程" name="B">内容2</el-tab-pane>
            <el-tab-pane label="dengruicode.com" name="C">内容3</el-tab-pane>
        </el-tabs>

        <h3> 6 tab标签页 动态添加</h3>
        <el-button @click="EleUISet.tabAdd">添加</el-button>
        <!-- for 循环生成 el-tab-pane -->
        <el-tabs v-model="EleUISet.selectedName" @tab-remove="EleUISet.tabRemove" closable type="card">
            <el-tab-pane v-for="(value, key) in EleUISet.tab.arr" :key="value.name" :label="value.title" :name="value.name">
                {{ value.content }}
            </el-tab-pane>
        </el-tabs>


        <h3>7 输入框</h3> 
        <!-- clearable 可一键清空 -->
            <h3>输入框</h3>
            <el-input v-model="EleUISet.name.value" clearable placeholder="请输入用户名" />

            <!-- show-password 可切换显示隐藏密码 -->
            <h3>密码框</h3>
            <el-input v-model="EleUISet.password.value" show-password placeholder="请输入密码" />

            <h3>文本域</h3>
            <el-input type="textarea" v-model="EleUISet.content.value" rows="2" />

            <h3>输入内容长度限制 - 输入框</h3>
            <el-input v-model="EleUISet.name.value" maxlength="10" show-word-limit />

            <h3>输入内容长度限制 - 文本域</h3>
            <el-input type="textarea" v-model="EleUISet.content.value" maxlength="20" rows="3" show-word-limit />

            <h3>尺寸</h3>
            大 <el-input size="large" />
            默认 <el-input />
            小 <el-input size="small" />

            <h3>前置</h3>
            <el-input v-model="EleUISet.url.value">
                <template #prepend>https://</template>
            </el-input>

            <h3>后置</h3>
            <el-input v-model="EleUISet.email.value">
                <template #append>@qq.com</template>
            </el-input>

            <h3>前置后置扩展 - 搜索</h3>
            <el-input placeholder="请输入课程名称">
                <template #prepend>
                    <el-select v-model="EleUISet.selected_input.value" placeholder="请选择" style="width: 100px;">
                        <el-option label="前端" value="1" />
                        <el-option label="后端" value="2" />
                        <el-option label="服务端" value="3" />
                    </el-select>
                </template>
                <template #append>
                    <el-button>
                        <el-icon><Search /></el-icon>
                    </el-button>
                </template>
            </el-input>

           
         <h3> 8 单选框、复选框</h3>
            <h3>单选框</h3>
                <el-radio v-model="EleUISet.radio.value" value="1">前端</el-radio>
                <el-radio v-model="EleUISet.radio.value" value="2">后端</el-radio>
                <el-radio v-model="EleUISet.radio.value" value="3">服务端</el-radio>

            <h3>单选框 - 事件绑定</h3>
                <el-radio v-model="EleUISet.radio2.value" value="a" @change="EleUISet.radioChange">前端</el-radio>
                <el-radio v-model="EleUISet.radio2.value" value="b" @change="EleUISet.radioChange">后端</el-radio>
                <el-radio v-model="EleUISet.radio2.value" value="c" @change="EleUISet.radioChange">服务端</el-radio>

            <h3>单选框组</h3>
                <el-radio-group v-model="EleUISet.radio3.value" @change="EleUISet.radioGroupChange">
                        <el-radio value="A">前端</el-radio>
                        <el-radio value="B">后端</el-radio>
                        <el-radio value="C">服务端</el-radio>
                </el-radio-group>
                
           <h3>复选框</h3>
                <el-checkbox-group v-model="EleUISet.checked.value">
                <el-checkbox value="1">前端</el-checkbox>
                <el-checkbox value="2">后端</el-checkbox>
                <el-checkbox value="3">服务端</el-checkbox>
                </el-checkbox-group>

           <h3>复选框--事件绑定</h3>
                <el-checkbox-group v-model="EleUISet.checked2.value" @change="EleUISet.checkboxGroupChange">
                <el-checkbox value="1">前端</el-checkbox>
                <el-checkbox value="2">后端</el-checkbox>
                <el-checkbox value="3">服务端</el-checkbox>
                </el-checkbox-group>


        <h3>9 下拉框</h3>
          <el-select v-model="EleUISet.selected1.value" placeholder="请选择">
                <el-option value="1" label="前端" />
                <el-option value="2" label="后端" />
                <el-option value="3" label="服务端" />
          </el-select>

          <h3>下拉框 - 事件绑定</h3>
            <el-select v-model="EleUISet.selected2.value" @change="EleUISet.selectChange" placeholder="请选择">
                <el-option value="a" label="前端" />
                <el-option value="b" label="后端" />
                <el-option value="c" label="服务端" />
            </el-select>
            
          <h3>动态生成 下拉框</h3>
            <el-select v-model="EleUISet.selected3.value" placeholder="请选择">
                <el-option v-for="item in EleUISet.data.options" 
                        :value="item.value" 
                        :label="item.label"
                   :key="item.value" />
            </el-select>
            
          <h3>下拉框 多选 - multiple</h3>
            <el-select v-model="EleUISet.selected4.value" multiple @change="EleUISet.selectChange" placeholder="请选择">
                <el-option value="1" label="前端" />
                <el-option value="2" label="后端" />
                <el-option value="3" label="服务端" />
            </el-select>
            <h3>10 日期 选择器 </h3>
            <h3>日期 el-date-picker</h3>
                <el-date-picker v-model="EleUISet.date.value" type="date" placeholder="请选择" />
           <h3>日期时间</h3>
               <el-date-picker v-model="EleUISet.date.value" type="datetime" placeholder="请选择" />

          <h3>事件绑定</h3>
              <el-date-picker v-model="EleUISet.date.value" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" @change="EleUISet.dateChange" />

        <h3>11  表单el-form：只是把前面的选择 ，输入融合在一起</h3>
         <el-form label-width="80" style="width: 400px;">
            <!-- el-form-item :表单子项目，label是子项的描述 / 名称 -->
            <el-form-item label="文本框">
                <el-input v-model="EleUISet.formdata.value.name" placeholder="请填写名称" />
            </el-form-item>

            <el-form-item label="单选框">
                <el-radio-group v-model="EleUISet.formdata.value.radio">
                    <el-radio value="1">前端</el-radio>
                    <el-radio value="2">后端</el-radio>
                    <el-radio value="3">服务端</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="复选框">
                <el-checkbox-group v-model="EleUISet.formdata.value.checkbox">
                    <el-checkbox value="a">前端</el-checkbox>
                    <el-checkbox value="b">后端</el-checkbox>
                    <el-checkbox value="c">服务端</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item label="日期时间">
                <el-date-picker v-model="EleUISet.formdata.value.date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>

            <el-form-item label="下拉框">
                <el-select v-model="EleUISet.formdata.value.select" placeholder="请选择">
                    <el-option value="A" label="前端" />
                    <el-option value="B" label="后端" />
                    <el-option value="C" label="服务端" />
                </el-select>
            </el-form-item>

            <el-form-item label="多选框">
                <el-select v-model="EleUISet.formdata.value.multipleSelect" multiple placeholder="请选择">
                    <el-option value="AA" label="前端" />
                    <el-option value="BB" label="后端" />
                    <el-option value="CC" label="服务端" />
                </el-select>
            </el-form-item>

            <el-form-item label="文本域">
                <el-input type="textarea" v-model="EleUISet.formdata.value.textarea" rows="2" placeholder="请填写内容" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="EleUISet.formadd">添加</el-button>
                <el-button @click="EleUISet.formreset">重置</el-button>
            </el-form-item>
         </el-form>
        
        <h3>12   对话框 el-dialog </h3>

        <el-button @click="EleUISet.dialog.value = true">打开</el-button>

        <!-- 写上后 draggable 就允许拖拽 -->
        <el-dialog v-model="EleUISet.dialog.value" width="500" title="标题" draggable @close="EleUISet.dialogClose">           
            <el-form label-width="80">  <!-- 表单在对话框内部 -->
                <el-form-item label="文本框">
                    <el-input v-model="EleUISet.dialogdata.value.name" placeholder="请填写名称" />
                </el-form-item>

                <el-form-item label="单选框">
                    <el-radio-group v-model=" EleUISet.dialogdata.value.radio">
                        <el-radio value="1">前端</el-radio>
                        <el-radio value="2">后端</el-radio>
                        <el-radio value="3">服务端</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="复选框">
                    <el-checkbox-group v-model="EleUISet.dialogdata.value.checkbox">
                        <el-checkbox value="a">前端</el-checkbox>
                        <el-checkbox value="b">后端</el-checkbox>
                        <el-checkbox value="c">服务端</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="日期时间">
                    <el-date-picker v-model="EleUISet.dialogdata.value.date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
                </el-form-item>

                <el-form-item label="下拉框">
                    <el-select v-model="EleUISet.dialogdata.value.select" placeholder="请选择">
                        <el-option value="A" label="前端" />
                        <el-option value="B" label="后端" />
                        <el-option value="C" label="服务端" />
                    </el-select>
                </el-form-item>

                <el-form-item label="多选框">
                    <el-select v-model="EleUISet.dialogdata.value.multipleSelect" multiple placeholder="请选择">
                        <el-option value="AA" label="前端" />
                        <el-option value="BB" label="后端" />
                        <el-option value="CC" label="服务端" />
                    </el-select>
                </el-form-item>

                <el-form-item label="文本域">
                    <el-input type="textarea" v-model="EleUISet.dialogdata.value.textarea" rows="2" placeholder="请填写内容" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="EleUISet.dialogadd">添加</el-button>
                    <el-button @click="EleUISet.dialogreset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>


        <h3>13 分页：el-pagination page-size:每页显示记录数 total:总记录数</h3>
        <el-pagination layout="prev, pager, next" :page-size="10" :total="50" />

        <h3>background:显示背景</h3>
        <el-pagination layout="prev, pager, next" :page-size="5" :total="50" background />

        <el-pagination background layout="prev, pager, next" :page-size="5" :total="50" />

        <h3>layout="total" 显示总数</h3>
        <el-pagination layout="prev, pager, next, total" :page-size="5" :total="50" />

        <h3>layout="jumper" 跳转</h3>
        <el-pagination layout="prev, pager, next, jumper, total" :page-size="5" :total="50" />

        <h3>事件绑定</h3>
        <el-pagination layout="prev, pager, next" :page-size="5" :total="50" @current-change="EleUISet.currentPage" />


        <h3>-14-- 表格：</h3>
        <el-table :data="EleUISet.table_data.value.arr" style="width: 800px;">
            <el-table-column prop="id" label="编号" width="80" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="web" label="网站" width="300" />
            <el-table-column prop="date" label="日期" />
        </el-table>

        <h3>带边框表格 border</h3>
        <el-table :data="EleUISet.table_data.value.arr" border style="width: 800px;">
            <el-table-column prop="id" label="编号" width="80" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="web" label="网站" width="300" />
            <el-table-column prop="date" label="日期" />
        </el-table>

        <h3>设置高度固定表头 height</h3>
        <el-table :data="EleUISet.table_data.value.arr" border height="120" style="width: 800px;">
            <el-table-column prop="id" label="编号" width="80" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="web" label="网站" width="300" />
            <el-table-column prop="date" label="日期" />
        </el-table>

        <h3>多选 type="selection" </h3>
        <el-table :data="EleUISet.table_data.value.arr" border style="width: 800px;">
            <el-table-column type="selection" width="55" />

            <el-table-column prop="id" label="编号" width="80" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="web" label="网站" width="300" />
            <el-table-column prop="date" label="日期" />
        </el-table>

        <h3>按钮</h3>
        <el-button type="primary" @click="EleUISet.table_del">删除</el-button>
        
        <el-table :data="EleUISet.table_data.value.arr" @selection-change="EleUISet.selected" border style="width: 900px;margin: 3px 0;">
            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column prop="id" label="编号" width="80" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="web" label="网站" width="300" />
            <el-table-column prop="date" label="日期" />

            <el-table-column label="操作" width="150">
                <template #default="scope">
                        <!-- scope.$index当前索引, scope.row 当前数据对象 -->
                    <el-button size="small" type="primary" @click="EleUISet.table_edit(scope.$index, scope.row)">
                        编辑
                    </el-button>
                    <el-button size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination layout="prev, pager, next, jumper, total" :page-size="5" :total="50" />





  </div>

</template>

<style>
#cesiumContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.vue-div {
  /* 其他样式 */
  /* pointer-events: none; 允许鼠标事件穿透 */
}
</style>
